<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-row :gutter="30" class="panel-group">
        <el-col :xs="24" :sm="24" :lg="16" class="card-panel-col">
          <el-row :gutter="40">
            <el-col :xs="24" :sm="24" :lg="6" style="margin-bottom: 32px">
              <div class="card-panel">
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    项目总数
                  </div>
                  <count-to :start-val="0" :end-val="totalProject" :duration="3000" class="card-panel-num" />
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="6" style="margin-bottom: 32px">
              <div class="card-panel">
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    已导入项目数
                  </div>
                  <count-to :start-val="0" :end-val="importedProject" :duration="3000" class="card-panel-num" />
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="6" style="margin-bottom: 32px">
              <div class="card-panel">
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    已导入项目数(本年度)
                  </div>
                  <count-to :start-val="0" :end-val="yearImportedProject" :duration="3000" class="card-panel-num" />
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="6" style="margin-bottom: 32px">
              <div class="card-panel">
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    已导入项目数(本月)
                  </div>
                  <count-to :start-val="0" :end-val="monthImportedProject" :duration="3000" class="card-panel-num" />
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix">
                <span>项目导入趋势</span>
              </div>
              <div>
                <ve-line
                  :data="lineChartData"
                  :settings="lineChartSettings"
                  :legend-visible="true"
                  :colors="lineColor"
                  :height="'400px'"
                  :data-zoom="lineDataZoom"
                ></ve-line>
              </div>
            </el-card>
          </el-row>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8" class="card-panel-col list-trend">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix" style="vertical-align:middle">
              <div style="float: left; padding: 10px 0">项目导入排行</div>
              <el-radio-group v-model="importedSelected" style="float: right; padding: 3px 0" size="mini">
                <el-radio-button label="事业群"></el-radio-button>
                <el-radio-button label="事业部"></el-radio-button>
              </el-radio-group>
            </div>
            <div v-if="importedSelected === '事业部'">
              <el-table
                :data="currentImportDeptData"
                style="width: 100%"
                :height="'490'"
                max-height="490">
                <el-table-column width="100" align="center" label="排名">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.$index=== 0 && currentImportDeptPage==1" type="danger" size="medium" >
                    TOP{{ scope.$index + 1 + (currentImportDeptPage - 1) * 10}}
                    </el-tag>
                    <el-tag v-else-if="scope.$index=== 1  && currentImportDeptPage==1" type="warning" size="medium" >
                    TOP{{ scope.$index + 1 + (currentImportDeptPage - 1) * 10 }}
                    </el-tag>
                    <el-tag v-else-if="scope.$index=== 2  && currentImportDeptPage==1" type="primary" size="medium" >
                    TOP{{ scope.$index + 1 + (currentImportDeptPage - 1) * 10 }}
                    </el-tag>
                    <span v-else> {{ scope.$index + 1 + (currentImportDeptPage - 1) * 10 }} </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="事业部">
                </el-table-column>
                <el-table-column
                  prop="count"
                  label="导入数"
                  width="80">
                </el-table-column>
              </el-table>
              <el-pagination
                :page-size="10"
                :pager-count="5"
                @current-change="handleCurrentImportDeptChange"
                :current-page="currentImportDeptPage"
                layout="prev, pager, next"
                style="text-align: center"
                :total="totalDeptData">
              </el-pagination>
            </div>
            <div v-else>
              <el-table
                :data="currentImportGroupData"
                style="width: 100%"
                :height="'490'"
                max-height="490">
                <el-table-column width="100" align="center" label="排名">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.$index=== 0 && currentImportGroupPage==1" type="danger" size="medium" >
                    TOP{{ scope.$index + 1 + (currentImportGroupPage - 1) * 10 }}
                    </el-tag>
                    <el-tag v-else-if="scope.$index=== 1  && currentImportGroupPage==1" type="warning" size="medium" >
                    TOP{{ scope.$index + 1 + (currentImportGroupPage - 1) * 10 }}
                    </el-tag>
                    <el-tag v-else-if="scope.$index=== 2  && currentImportGroupPage==1" type="primary" size="medium" >
                    TOP{{ scope.$index + 1 + (currentImportGroupPage - 1) * 10 }}
                    </el-tag>
                    <span v-else> {{ scope.$index + 1 + (currentImportGroupPage - 1) * 10 }} </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="事业群">
                </el-table-column>
                <el-table-column
                  prop="count"
                  label="导入数"
                  width="80">
                </el-table-column>
              </el-table>
              <el-pagination
                :page-size="10"
                :pager-count="5"
                @current-change="handleCurrentImportGroupChange"
                :current-page="currentImportGroupPage"
                layout="prev, pager, next"
                style="text-align: center"
                :total="totalGroupData">
              </el-pagination>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :xs="24" :sm="24" :lg="12" style="margin-bottom: 32px">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix">
              <span style="float: left; padding: 10px 0">项目分布（全部）</span>
              <el-radio-group v-model="projectSelected" style="float: right; padding: 3px 0" size="mini">
                <el-radio-button label="事业群"></el-radio-button>
                <el-radio-button label="事业部"></el-radio-button>
              </el-radio-group>
            </div>
            <div v-if="projectSelected === '事业群'">
              <ve-pie
                :data="pieGroupData"
                :legend-visible="true"
                :settings="pieSettings"
                :extend="pieExtend"
              ></ve-pie>
            </div>
            <div v-else>
              <ve-pie
                :data="pieDeptData"
                :legend-visible="true"
                :settings="pieSettings"
                :extend="pieExtend"
              ></ve-pie>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12" style="margin-bottom: 32px">
          <el-card class="box-card m-b" shadow="never">
            <div slot="header" class="clearfix">
              <span style="float: left; padding: 10px 0">项目分布（已导入）</span>
              <el-radio-group v-model="importedDistributeSelected" style="float: right; padding: 3px 0" size="mini">
                <el-radio-button label="事业群"></el-radio-button>
                <el-radio-button label="事业部"></el-radio-button>
              </el-radio-group>
            </div>
            <div v-if="importedDistributeSelected === '事业群'">
              <ve-pie
                :data="pieImportGroupDistribute"
                :legend-visible="true"
                :settings="pieSettings"
                :extend="pieExtend"
              ></ve-pie>
            </div>
            <div v-else>
              <ve-pie
                :data="pieImportDeptDistribute"
                :legend-visible="true"
                :settings="pieSettings"
                :extend="pieExtend"
              ></ve-pie>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-bottom:32px;">
        <el-col :xs="24" :sm="24" :lg="16">
          <el-row :gutter="40" class="panel-group">
            <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    项目平均评分(本年度)
                  </div>
                  <count-to :start-val="0" :end-val="yearAvgMark" :duration="3000" :decimals="2" class="card-panel-num" />
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-description">
                  <div class="card-panel-text">
                        项目平均评分(当月)
                  </div>
                  <count-to :start-val="0" :end-val="monthAvgMark" :duration="3000" :decimals="2" class="card-panel-num" />
                  <!-- <i class="el-icon-caret-top icon-item" style="color:green">20%</i> -->
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    项目平均评分(历史)
                  </div>
                  <count-to :start-val="0" :end-val="avgMark" :duration="3000" :decimals="2" class="card-panel-num" />
                </div>
              </div>
            </el-col>
          </el-row>
          <el-card class="box-card m-b" shadow="never" style="margin-bottom: 32px">
            <div slot="header" class="clearfix">
              <span>项目综合评分趋势</span>
            </div>
            <div>
              <ve-line
              :data="chartData"
              :settings="chartSettings"
              :height="'400px'"
              :data-zoom="chartDataZoom">
              </ve-line>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card m-b  list-trend" shadow="never">
            <div slot="header" class="clearfix">
              <span style="float: left; padding: 10px 0">项目综合评分排名</span>
              <el-radio-group v-model="projectMarkSelected" style="float: right; padding: 3px 0" size="mini">
                <el-radio-button label="事业群"></el-radio-button>
                <el-radio-button label="事业部"></el-radio-button>
                <el-radio-button label="项目"></el-radio-button>
              </el-radio-group>
            </div>
            <div v-if="projectMarkSelected === '事业群'">
              <el-table
                :data="currentGroupMarkData"
                style="width: 100%"
                :height="'490'"
                max-height="490">
                <el-table-column width="100" align="center" label="排名">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.rank===1" type="danger" size="medium" >
                    TOP{{ scope.row.rank }}
                    </el-tag>
                    <el-tag v-else-if="scope.row.rank===2" type="warning" size="medium" >
                    TOP{{ scope.row.rank }}
                    </el-tag>
                    <el-tag v-else-if="scope.row.rank===3" type="primary" size="medium" >
                    TOP{{ scope.row.rank }}
                    </el-tag>
                    <span v-else> {{scope.row.rank}} </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="事业群名">
                </el-table-column>
                <el-table-column
                  prop="avg_mark"
                  label="分数"
                  width="80">
                </el-table-column>
              </el-table>
              <el-pagination
                :page-size="10"
                :pager-count="5"
                @current-change="handleCurrentGroupMarkChange"
                :current-page="currentGroupMarkPage"
                layout="prev, pager, next"
                style="text-align: center"
                :total="totalGroupMarkCount">
              </el-pagination>
            </div>
            <div v-else-if="projectMarkSelected === '事业部'">
              <el-table
                :data="currentDeptMarkData"
                style="width: 100%"
                :height="'490'"
                max-height="490">
                <el-table-column width="100" align="center" label="排名">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.rank===1" type="danger" size="medium" >
                    TOP{{ scope.row.rank }}
                    </el-tag>
                    <el-tag v-else-if="scope.row.rank===2" type="warning" size="medium" >
                    TOP{{ scope.row.rank }}
                    </el-tag>
                    <el-tag v-else-if="scope.row.rank===3" type="primary" size="medium" >
                    TOP{{ scope.row.rank }}
                    </el-tag>
                    <span v-else> {{scope.row.rank}} </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="事业部名">
                </el-table-column>
                <el-table-column
                  prop="avg_mark"
                  label="分数"
                  width="80">
                </el-table-column>
              </el-table>
              <el-pagination
                :page-size="10"
                :pager-count="5"
                @current-change="handleCurrentDeptMarkChange"
                :current-page="currentDeptMarkPage"
                layout="prev, pager, next"
                style="text-align: center"
                :total="totalDeptMarkCount">
              </el-pagination>
            </div>
            <div v-else>
              <el-table
                :data="currentProjMarkData"
                style="width: 100%"
                :height="'490'"
                max-height="490">
                <el-table-column width="100" align="center" label="排名">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.rank===1" type="danger" size="medium" >
                    TOP{{ scope.row.rank }}
                    </el-tag>
                    <el-tag v-else-if="scope.row.rank===2" type="warning" size="medium" >
                    TOP{{ scope.row.rank }}
                    </el-tag>
                    <el-tag v-else-if="scope.row.rank===3" type="primary" size="medium" >
                    TOP{{ scope.row.rank }}
                    </el-tag>
                    <span v-else> {{scope.row.rank}} </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="项目名">
                </el-table-column>
                <el-table-column
                  prop="avg_mark"
                  label="分数"
                  width="80">
                </el-table-column>
              </el-table>
              <el-pagination
                :page-size="10"
                :pager-count="5"
                @current-change="handleCurrentProjMarkChange"
                :current-page="currentProjMarkPage"
                layout="prev, pager, next"
                style="text-align: center"
                :total="totalProjMarkCount">
              </el-pagination>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { removeToken, removeName } from '@/utils/auth'
import { getHeader } from '@/app.config';
import 'echarts/lib/component/dataZoom';
export default {
  name: 'Dashboard',
  components: {
    CountTo
  },
  data() {
    return {
      lineDataZoom:[{
          type: 'slider',
          start: 0,
          end: 100
      }],
      chartDataZoom:[{
          type: 'slider',
          start: 0,
          end: 100
      }],
      currentImportDeptPage: 1,
      currentImportDeptData: [],
      totalDeptData: 0,
      currentImportGroupPage: 1,
      currentImportGroupData: [],
      totalGroupData: 0,
      avgMark: 0,
      yearAvgMark: 0,
      monthAvgMark: 0,
      totalProject: 0,
      importedProject: 0,
      yearImportedProject: 0,
      monthImportedProject: 0,
      importedSelected: '事业群',
      projectSelected: '事业群',
      importedDistributeSelected: '事业群',
      projectMarkSelected: '事业群',
      pieDeptData: {
        columns: ["name", "count"],
        rows: []
      },
      pieGroupData: {
        columns: ["name", "count"],
        rows: []
      },
      pieExtend: {
        legend: {
          orient: "vertical",
          left: "left"
        }
      },
      pieSettings: {
        limitShowNum: 9
      },
      pieImportDeptDistribute: {
        columns: ["name", "count"],
        rows: []
      },
      pieImportGroupDistribute: {
        columns: ["name", "count"],
        rows: []
      },
      lineChartData: {
        columns: ["date", "count"],
        rows: []
      },
      lineChartSettings: {
        labelMap: {'date': '月份', 'count': '数量'}
      },
      lineColor: ["#7cb5ec"],
      chartSettings: {
        labelMap: {'date': '月份', 'avg_mark': '分数'}
      },
      chartData: {
        columns: ['date', 'avg_mark'],
        rows: []
      },
      tableProjMarkData: [],
      currentProjMarkPage: 1,
      currentProjMarkData: [],
      totalProjMarkCount: 0,
      tableDeptMarkData: [],
      currentDeptMarkPage: 1,
      currentDeptMarkData: [],
      totalDeptMarkCount: 0,
      tableGroupMarkData: [],
      currentGroupMarkPage: 1,
      currentGroupMarkData: [],
      totalGroupMarkCount: 0,
      tableDeptData: [],
      tableGroupData: [],
    }
  },
  methods: {
    handleCurrentImportDeptChange(page) {
      this.currentImportDeptPage = page;
			this.currentImportDeptData = this.pagingData(this.tableDeptData, this.totalDeptData, page);
    },
    handleCurrentImportGroupChange(page) {
      this.currentImportGroupPage = page;
			this.currentImportGroupData = this.pagingData(this.tableGroupData, this.totalGroupData, page);
    },
    handleCurrentProjMarkChange(page) {
      this.currentProjMarkPage = page;
			this.currentProjMarkData = this.pagingData(this.tableProjMarkData, this.totalProjMarkCount, page);
    },
    handleCurrentGroupMarkChange(page) {
      this.currentGroupMarkPage = page;
			this.currentGroupMarkData = this.pagingData(this.tableGroupMarkData, this.totalGroupMarkCount, page);
    },
    handleCurrentDeptMarkChange(page) {
      this.currentDeptMarkPage = page;
			this.currentDeptMarkData = this.pagingData(this.tableDeptMarkData, this.totalDeptMarkCount, page);
    },
    pagingData(originData, totalCount, currentPage) {
      var count = currentPage * 10;
      var currentData = [];
			if (totalCount >= count) {
				currentData = originData.slice((currentPage - 1) * 10, count);
			} else if (totalCount < count) {
				currentData = originData.slice((currentPage - 1) * 10, totalCount);
      }
      return currentData;
		},
    getProjStats() {
			var source = process.env.VUE_APP_KANBAN_HOST + '/api/base/project_stats'
      this.$axios.get(source, {headers: getHeader()})
          .then((response) => {
          if (response.status == 200) {
              if(response.data.code == 401) {
                removeToken()
                removeName()
                this.$message.error('登陆超时或该账号已被登出，请您重新登录');
                this.$router.push({
                  path: '/#/login'
                })
                return
              }
              this.importedProject = response.data.imported_count;
              this.totalProject = response.data.total;
              this.lineChartData.rows = response.data.imported_trend;
              this.yearImportedProject = response.data.year_imported_count;
              this.monthImportedProject = response.data.month_imported_count;
            }
          })
          .catch((err) => {
            console.log(err);
      });
    },
    getImportedRanking() {
      var url = process.env.VUE_APP_KANBAN_HOST + '/api/base/imported_ranking';
      var _self = this
			this.$axios.get(url, {headers: getHeader(), timeout: 5000 })
				.then(response => {
          if(response.data.code == 401) {
                removeToken()
                removeName()
                // this.$message.error('登陆超时或该账号已被登出，请您重新登录');
                this.$router.push({
                  path: '/#/login'
                })
                return
              }
          _self.tableDeptData = response.data.dept_rank;
          _self.tableGroupData = response.data.group_rank;
          _self.pieImportDeptDistribute.rows = response.data.dept_rank;
          _self.pieImportGroupDistribute.rows = response.data.group_rank;
          _self.totalDeptData = _self.tableDeptData.length;
          _self.currentImportDeptPage = 1;
          _self.currentImportDeptData = _self.pagingData(_self.tableDeptData, _self.totalDeptData, 1);
          _self.totalGroupData = _self.tableGroupData.length;
          _self.currentImportGroupPage = 1;
          _self.currentImportGroupData = _self.pagingData(_self.tableGroupData, _self.totalGroupData, 1);
				});
    },
    getProjectDistribute() {
      var url = process.env.VUE_APP_KANBAN_HOST + '/api/base/project_distribute';
			this.$axios.get(url, { headers: getHeader(), timeout: 5000 })
				.then(response => {
          if(response.data.code == 401) {
                removeToken()
                removeName()
                // this.$message.error('登陆超时或该账号已被登出，请您重新登录');
                this.$router.push({
                  path: '/#/login'
                })
                return
              }
          this.pieDeptData.rows = response.data.dept_distribute
          this.pieGroupData.rows = response.data.group_distribute
				});
    },
    getMarkStats() {
      var url = process.env.VUE_APP_KANBAN_HOST + '/api/base/get_scores_stats';
			this.$axios.get(url, {headers: getHeader(), timeout: 5000 })
				.then(response => {
          if(response.data.code == 401) {
                removeToken()
                removeName()
                // this.$message.error('登陆超时或该账号已被登出，请您重新登录');
                this.$router.push({
                  path: '/#/login'
                })
                return
              }
          this.avgMark = response.data.avg_mark
          this.yearAvgMark = response.data.year_avg_mark
          this.monthAvgMark = response.data.month_avg_mark
				});
    },
    getMarkRanking() {
      var url = process.env.VUE_APP_KANBAN_HOST + '/api/scores/get_project_mark';
      var _self = this
			this.$axios.get(url, {headers: getHeader(), timeout: 5000 })
				.then(response => {
          if(response.data.code == 401) {
                removeToken()
                removeName()
                // this.$message.error('登陆超时或该账号已被登出，请您重新登录');
                this.$router.push({
                  path: '/#/login'
                })
                return
              }
          _self.tableProjMarkData = response.data.mark_project_rank;
          _self.totalProjMarkCount = _self.tableProjMarkData.length;
          _self.currentProjMarkPage = 1;
          _self.currentProjMarkData = _self.pagingData(_self.tableProjMarkData, _self.totalProjMarkCount, 1);
          _self.tableDeptMarkData = response.data.mark_dept_rank;
          _self.totalDeptMarkCount = _self.tableDeptMarkData.length;
          _self.currentDeptMarkPage = 1;
          _self.currentDeptMarkData = _self.pagingData(_self.tableDeptMarkData, _self.totalDeptMarkCount, 1);
          _self.tableGroupMarkData = response.data.mark_group_rank;
          _self.totalGroupMarkCount = _self.tableGroupMarkData.length;
          _self.currentGroupMarkPage = 1;
          _self.currentGroupMarkData = _self.pagingData(_self.tableGroupMarkData, _self.totalGroupMarkCount, 1);
				});
    },
    getScoreTrend() {
      var url = process.env.VUE_APP_KANBAN_HOST + '/api/base/get_scores_trend';
      this.$axios
				.get(url, {headers: getHeader(), timeout: 5000 })
				.then(response => {
          if(response.data.code == 401) {
                removeToken()
                removeName()
                // this.$message.error('登陆超时或该账号已被登出，请您重新登录');
                this.$router.push({
                  path: '/#/login'
                })
                return
              }
          this.chartData.rows = response.data.trend_mark
				});
    }
  },
  computed: {
  },
  mounted () {
    this.getProjStats();
    this.getImportedRanking();
    this.getProjectDistribute();
    this.getMarkStats();
    this.getMarkRanking();
    this.getScoreTrend();
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
.list-trend>>> .el-table__row>td{
	border: none;
}
// .list-trend>>> .el-table::before {//去掉最下面的那一条线
// 	height: 0px;
// }
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}
.panel-group {

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    // cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-radius: 5px;
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
    }
    .card-panel-description {
      float: left;
      font-weight: bold;
      margin: 26px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
.icon-item {
    margin-left: 20px;
    height: 85px;
    width: 100px;
    font-size: 15px;
    color: #24292e;
    // cursor: pointer;
  }

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
